<template>
  <el-dialog :title="titleName" :visible.sync="dialogVisible" custom-class="custom_dialog" :close-on-click-modal="false"
             :modal-append-to-body="false" width="40%" :before-close="onClose">

    <div class="editContent">
      <el-form :rules="userInfoRules" ref="userInfo" :model="userInfo" label-width="100px" label-position="right">
        <el-form-item class="form-item" prop="userPicture" style="text-align: center;margin-right: 100px;">
          <el-avatar :size="avatarSize" :src="userInfo.userPicture"></el-avatar>
        </el-form-item>

        <el-row>
          <el-col :span="11">
            <el-form-item label="账号" class="form-item" prop="loginId">
              <el-input v-model="userInfo.loginId" disabled clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="用户昵称" class="form-item" prop="userName">
              <el-input v-model="userInfo.userName" clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="11">
            <el-form-item label="手机号" class="form-item" prop="mobilePhone">
              <el-input v-model="userInfo.mobilePhone" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="邮箱" class="form-item" prop="mailbox">
              <el-input v-model="userInfo.mailbox" clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="11">
            <el-form-item label="生日" class="form-item" prop="birthday">
              <el-date-picker v-model="userInfo.birthday" type="date" placeholder="选择生日"></el-date-picker>
            </el-form-item>
          </el-col>

          <el-col :span="11">
            <el-form-item label="性别" class="form-item" prop="sex">
              <el-radio-group v-model="userInfo.sex">
                <el-radio :label="'1'">男</el-radio>
                <el-radio :label="'2'">女</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
    </div>

    <div style="text-align: center">
      <el-button type="danger" @click="onClose" icon="el-icon-close">取消</el-button>
      <el-button type="primary" @click="onSubmit('userInfo')" icon="el-icon-check">提交</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import { updateUserInfo } from '@/api/user'

  export default {
    name: 'user-edit',
    data() {
      return {
        titleName: '',
        dialogVisible: false,
        // 头像大小
        avatarSize: 120,
        userInfo: {},
        value: '',
        userInfoRules: {
          userName: [{ required: true, message: '请输入用户昵称', trigger: 'blur' }],
          birthday: [{ required: true, message: '请选择生日', trigger: 'blur' }],
          sex: [{ required: true, message: '请选择性别', trigger: 'blur' }]
        }

      }
    },
    methods: {
      // 打开界面
      open(row) {
        this.titleName = '编辑用户信息'
        this.userInfo = row
        this.dialogVisible = true

      },
      // 提交
      onSubmit(userInfo) {
        var me = this
        me.$refs[userInfo].validate((valid) => {
          if (valid) {
            updateUserInfo(me.userInfo).then(response => {
              if (response.status === 200) {
                me.$message({ message: response.msg, type: 'success' })
                me.onClose()
              } else {
                me.$message({ message: response.msg, type: 'error' })
              }
            }).catch(error => {
            })
          } else {
            return false
          }
        })
      },
      // 关闭
      onClose() {
        // 清空表单
        this.$refs['userInfo'].resetFields()
        this.userInfo = {}
        //清空校验数据
        this.$refs['userInfo'].clearValidate()
        this.dialogVisible = false
        this.$emit('closeHide', false)

      }
    }
  }
</script>

<style scoped>

</style>
